<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {message} from 'ant-design-vue'
import type {UploadFile} from 'ant-design-vue'
import PictureUpload from '@/components/PictureUpload.vue'
import {addTeam} from "@/api/teamController.ts";
import router from "@/router";
import {useLoginUserStore} from "@/stores/useLoginUserStore.ts";

const loginUserStore = useLoginUserStore();
/* ---------- 表单数据 ---------- */
const formState = reactive<API.addTeamParams>({
  teamname: '',
  password: '',
  checkPassword: '',
  description: '',
  maxPerson: 5,
  status: 0,
  userId: loginUserStore.loginUser.id
})

/* ---------- 头像文件 ---------- */
const avatar = ref<File | null>(null)  // 仅用于 a-upload 的 v-model
// const avatarFile = ref<File | null>(null) // 真正要上传的文件

const tags = ref([]);
const options = [...Array(25)].map((_, i) => ({value: (i + 10).toString(36) + (i + 1)}));


/* ---------- 提交 ---------- */
const handleSubmit = async () => {
  if (formState.password !== formState.checkPassword) {
    message.error('两次密码不一致');
    return;
  }

  const res = await addTeam(
      {
        data: {
          ...formState,
          tags: tags.value,
        },
      },
      avatar.value
  );

  if (res.data.code === 0 && res.data.data) {
    message.success('创建成功');
    await router.push({ path: '/team', replace: true });
  } else {
    message.error('创建失败，' + res.data.message);
  }
};
</script>

<template>
  <div id="TeamAddPage">
    <h2 class="title">厚米匹配 - 创建队伍</h2>
    <div class="desc">找寻志同道合的厚米</div>

    <a-form
        :model="formState"
        layout="vertical"
        autocomplete="off"
        @finish="handleSubmit"
    >
      <a-form-item
          name="teamname"
          :rules="[{ required: true, message: '请输入队伍名' }]"
      >
        <a-input v-model:value="formState.teamname" placeholder="请输入队伍名"/>
      </a-form-item>

      <!-- 头像 -->
      <a-form-item>
        <PictureUpload v-model:avatar="avatar"/>
      </a-form-item>

      <a-form-item>
        <a-textarea
            v-model:value="formState.description"
            placeholder="请输入队伍描述"
            :auto-size="{ minRows: 2, maxRows: 5 }"
        />
      </a-form-item>

      <a-form-item>
        <a-select
            v-model:value="tags"
            mode="tags"
            style="width: 100%"
            placeholder="请输入队伍标签"
            :options="options"
            :open=false
        ></a-select>
      </a-form-item>

      <a-form-item>
        <a-row>
          <a-col :span="12">
            <a-slider v-model:value="formState.maxPerson" :min="1" :max="10"/>
          </a-col>
          <a-col :span="4">
            <a-input-number v-model:value="formState.maxPerson" :min="1" :max="10" style="margin-left: 16px"/>
          </a-col>
        </a-row>
      </a-form-item>

      <a-form-item>
        <a-radio-group v-model:value="formState.status" name="status">
          <a-radio :value="0">公开</a-radio>
          <a-radio :value="1">加密</a-radio>
          <a-radio :value="2">私有</a-radio>
        </a-radio-group>
      </a-form-item>

      <div class="passwordInput" v-if="formState.status!==0">
        <a-form-item
            name="password"
            :rules="[
          { required: true, message: '请输入密码' },
          { min: 3, max: 10, message: '密码长度为 3-10 位' }
        ]"
        >
          <a-input-password v-model:value="formState.password" placeholder="请输入密码"/>
        </a-form-item>

        <a-form-item
            name="checkPassword"
            :rules="[
          { required: true, message: '请再次输入密码' },
          { min: 3, max: 10, message: '密码长度为 3-10 位' }
        ]"
        >
          <a-input-password
              v-model:value="formState.checkPassword"
              placeholder="请确认密码"
          />
        </a-form-item>
      </div>


      <a-form-item>
        <a-button type="primary" html-type="submit" style="width: 100%">创建队伍</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<style scoped>
#TeamAddPage {
  max-width: 400px;
  margin: 25px auto;
}

.title {
  text-align: center;
  margin-bottom: 16px;
}

.desc {
  text-align: center;
  color: #bbb;
  margin-bottom: 16px;
}
</style>
